const progress = document.getElementById("progress");

function progressStart() {
  let count = 0;
  let timer

  // setInterval
  /*  timer = setInterval(() => {
     count++
     // 数字+
     progress.innerHTML = count + '%'
     // width+
     progress.style.width = count + '%'
     if (count >= 100) {
       clearInterval(timer)
     }
   }, 10); */


  //  setTimeout

  /* 
   ❌：
    1、循环瞬间完成，所以延迟函数中拿到的count是最终的结果，没有过程
    2、因为100个延迟函数是同时到时间的，所以会最终一起输出
  */
  /*       while (count < 100) {
          setTimeout(() => {
            // count++
            // 数字+
            // progress.innerHTML = count + '%'
            // // width+
            // progress.style.width = count + '%'
            console.log(count);
          }, 1000)
          count++
        } */


  // setTimeout(() => {
  //   count++
  //   console.log(count);

  //     setTimeout(() => {
  //     count++
  //     console.log(count);

  //       setTimeout(() => {
  //       count++
  //       console.log(count);
  //     }, 1000);

  //   }, 1000);

  // }, 1000);

  // 函数自己调用自己 =》 【递归】  ⚠️：一定要有结束条件，不然就是死循环
  function fn1() {
    setTimeout(() => {
      count++
      console.log(count);
      if (count < 100) {
        fn1()
      }
    }, 10);
  }
  fn1()

}

/*
  js的事件循环机制（event loop）

  同步任务：顺序执行，有错就阻塞
  异步任务：setTimeout,setInterval,dom操作，ajax，promise async/await
    微任务（先）：promise async/await
    宏任务（后）：setTimeout,setInterval

  事件的执行顺序：
    见到同步就直接执行
    见到异步的任务，就把改任务放到异步队列中排队，接着看下面的代码，有同步就直接执行，
    当第一轮的同步任务都执行完了，就去异步队列里看哪个异步任务完成了就把他们中的同步任务放到同步队列中顺序执行
    若再遇到异步任务就放到异步队列中排队
    以此循环，直到所有任务都完成
  1
  a
  b
  2
  3
  c

  同步     ｜｜｜        异步
  1                      a
  2                      b
  3                      c
  111                    d
  333
  222
  444
*/

// setTimeout(() => {
//   console.log(111);
// }, 0);
// console.log(222);